<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>get请求</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      text-align: center;
    }

    .title {
      margin-bottom: 20px;
    }

    .user {
      width: 50vw;
      height: 20vh;
      border: 1px solid red;
      margin: 50px auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    button {
      margin-top: 50px;
      width: 7vw;
      height: 70px;
      background-color: rgb(222, 227, 227);
      border: 0;
      font-size: 15px;
    }
  </style>

  <body>
    <h1 id="title">
      学生个人信息:&nbsp;姓名:何礼,学号:2022020109,班级:计应7班。
    </h1>
    <div class="user">
      <span>姓名</span>
      <input type="text" name="username" id="username" />

      <span>班级</span>
      <input type="text" name="addr" id="addr" /><br />

      <span>学号</span>
      <input type="text" name="studentid" id="studentid" />
    </div>
    <button onclick="SendGet()">点击按钮<br />发送get请求<br />更新页面</button>
  </body>
  <script>
    function SendGet() {
      //接受页面里的内容
      let title = document.querySelector("#title");
      let name = document.querySelector("#username").value;
      let addr = document.querySelector("#addr").value;
      let studentid = document.querySelector("#studentid").value;
      //拼接处地址加上输入框里的username和addr,
      let url =
        "http://127.0.0.1:3000/user?username=" +
        name +
        "&addr=" +
        addr +
        "&studentid=" +
        studentid;
      //拼接参数
      //发送请求
      let http = new XMLHttpRequest();

      http.open("get", url);
      http.send();
      http.onreadystatechange = function () {
        if (http.readyState === 4) {
          if (http.status >= 200 && http.status < 300) {
            //因为输出的是字符串，所以在进行对象类型的转化
            title.innerHTML = JSON.parse(http.responseText).welcome;
          }
        }
      };
    }
  </script>
</html>
